<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <!--
     需求：名字拼接   firstname + lastname = fullname
     -->

    <!-- 方案3： 使用computed 计算属性 -->

    <input type="text" v-model="firstname"> +
    <input type="text" v-model="lastname"> =
    <input type="text" v-model="fullname">

    <p>{{ fullname }}</p>
    <p>{{ fullname }}</p>  <!-- div中使用 计算属性 -->

</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: '',
            lastname: '',
            // fullname: '',// 这里不定义该属性，
        },
        methods: {},
        watch: {},
        computed: {
            // 在 computed中，可以定义一些属性，这些属性叫做【计算属性】，其本质是方法，只不过，
            // 我们在使用这些计算属性时，是把它们的名称，直接当做属性来使用的；并不会把计算属性当做方法去调用。

            //注意：1.计算属性，在引用的时候，一定不要加括号去调用，直接把它当作普通属性去使用就好；
            // 2. 只要 计算属性 这个function内部，所用到的任何 data中的数据 发生变化，就会立即重新计算这个计算属性的值
            // 3. 计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所用的任何数据都没有发生变化，则不会重新对计算属性求值。


            'fullname': function () {
                console.log('ok')
                return this.firstname + ' - ' + this.lastname
            }
        },
    })
</script>


</body>
</html>
